import React, { useEffect, FC, ReactElement } from 'react';
// import {Button} from "antd"
import { connect } from 'umi';
import { TagProps } from './data';
import './index.css';

import 'rc-banner-anim/assets/index.css';
import BannerAnim, { Element } from 'rc-banner-anim';
import TweenOne from 'rc-tween-one';
const BgElement = Element.BgElement;

const Home = ({ tag }: { tag: TagProps }) => {
  useEffect(() => {
    console.log(tag, 'tag');
  }, []);
  return (
    <div className="home-banner">
      {/* <h1>{tag.tag}</h1> */}
      <BannerAnim prefixCls="banner-user" autoPlay autoPlaySpeed={2000}>
        <Element prefixCls="banner-user-elem" key="0">
          <BgElement
            key="bg"
            className="bg"
            style={{
              background: '#364D79',
            }}
          />
          <TweenOne
            className="banner-user-title"
            animation={{ y: 30, opacity: 0, type: 'from' }}
          >
            Ant Motion Banner
          </TweenOne>
          <TweenOne
            className="banner-user-text"
            animation={{ y: 30, opacity: 0, type: 'from', delay: 100 }}
          >
            The Fast Way Use Animation In React
          </TweenOne>
        </Element>
        <Element prefixCls="banner-user-elem" key="1">
          <BgElement
            key="bg"
            className="bg"
            style={{
              background: '#64CBCC',
            }}
          />
          <TweenOne
            className="banner-user-title"
            animation={{ y: 30, opacity: 0, type: 'from' }}
          >
            Ant Motion Banner
          </TweenOne>
          <TweenOne
            className="banner-user-text"
            animation={{ y: 30, opacity: 0, type: 'from', delay: 100 }}
          >
            The Fast Way Use Animation In React
          </TweenOne>
        </Element>
      </BannerAnim>
    </div>
  );
};
export default connect(({ tag }: { tag: TagProps }) => ({ tag }))(Home);
